<template>
  <el-container class="container">
    <el-header class="header">
      <my-header></my-header>
    </el-header>
    <el-container>
      <el-aside class="aside" width="30vw">
        <user-info></user-info>
        <music-time-machine></music-time-machine>
        <style-list></style-list>
      </el-aside>
      <el-container>
        <el-main class="main">
          <main-map></main-map>
        </el-main>
        <el-footer class="footer" height="20vh">
          <music></music>
        </el-footer>
      </el-container>
      <el-aside class="aside" width="30vw">
        <play-list></play-list>
        <hot-topic></hot-topic>
      </el-aside>
    </el-container>
  </el-container>
</template>

<script>
  import mainMap from '@/components/main'
  import myHeader from '@/components/header'
  import userInfo from '@/components/leftUserInfo'
  import musicTimeMachine from '@/components/musicTimeMachine'
  import styleList from '@/components/styleList'
  import hotTopic from '@/components/hotTopic'
  import playList from '@/components/playList'
  import music from '@/components/music'

  export default {
    name: "index",
    components: {
      mainMap, myHeader, userInfo, musicTimeMachine, styleList, hotTopic,playList,music
    }
  }
</script>

<style scoped>

</style>
